<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>个人中心-投资记录</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <div th:include="includeJs::includeJs"></div>
    <div th:include="includeJs::layui_js"></div>

    <link rel="stylesheet" th:href="@{/css/account/lay-cz.css}">
    <link rel="stylesheet" th:href="@{/css/userInfo/common.css}">
    <link rel="stylesheet" th:href="@{/css/userInfo/user.css}">
    <link rel="stylesheet" th:href="@{/css/userInfo/fileupload.less.css}">

    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/userInfo/common.js}"></script>
    <script type="text/javascript" th:src="@{/js/userInfo/user.js}"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>

</head>
<body>
<!--最上面-->
<link th:replace="includeJs::dingding_header">
<!--第二上面-->
<div style="background-color: white;width: 100%">
    <link th:replace="includeJs::dingding_nav">
</div>
<!--个人中心-->
<div class="wrapper wbgcolor">
    <div class="w1200 personal">
        <!--引入菜单栏-->
        <link th:replace="includeJs::userInfoMenu">
        <div class="personal-main">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this" style="font-size: 20px;">定期投资记录</li>
                    <li style="font-size: 20px;">活期投资记录</li>
                </ul>
                <div class="layui-tab-content" style="height: 100px;">
                    <!--定期投资记录-->
                    <div class="layui-tab-item layui-show">
                        <div  id="app" class="personal-money  pmain-conmain2" >
                            <!--<h3><i>定期投资记录</i></h3>-->
                            <table class="layui-table" lay-skin="line">
                                <colgroup>
                                    <col width="180">
                                    <col width="150">
                                    <col width="200">
                                    <col>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>投资时间</th>
                                    <th>投资项目</th>
                                    <th>金额</th>
                                    <th>状态</th>
                                    <th>类型</th>
                                </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="b in bid1" >
                                        <td v-text="b.Investment_time"></td>
                                        <td v-text="b.mark_name"></td>
                                        <td v-text="b.money	"></td>
                                        <td v-text="b.status"></td>
                                        <td v-text="b.types"></td>
                                    </tr>
                                </tbody>
                            </table>
                            <!--分页  居中显示-->
                            <center>
                                <div id="demo0"></div>
                            </center>
                        </div>
                    </div>
                    <!--活期投资记录-->
                    <div class="layui-tab-item">
                        <div  id="app2" class="personal-money  pmain-conmain2" >
                            <!--<h3><i>活期投资记录</i></h3>-->
                            <table class="layui-table" lay-skin="line">
                                <colgroup>
                                    <col width="180">
                                    <col width="150">
                                    <col width="200">
                                    <col>
                                </colgroup>
                                <thead>
                                <tr>
                                    <th>投资时间</th>
                                    <th>投资项目</th>
                                    <th>金额</th>
                                    <th>状态</th>
                                    <th>类型</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(b,index) in bid2" >
                                        <td v-text="b.Investment_time"></td>
                                        <td v-text="b.mark_name"></td>
                                        <td v-text="b.money	"></td>
                                        <td v-text="b.status"></td>
                                        <td v-text="b.types"></td>
                                        <td>
                                            <button type="button"  @click="hq(b.bid_id,index)" v-if="b.status=='已通过'" class="layui-btn">未收回</button>
                                            <button type="button"  v-else-if="b.status=='已收回'" class="layui-btn layui-btn-disabled">已收回</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <!--分页  居中显示-->
                            <center>
                                <div id="demo1"></div>
                            </center>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<link th:replace="includeJs::userInfoJS">
</body>
<script>
    //定期投资记录
    let vue1 = new Vue({
        el: "#app",
        data: {
            bid1:null
        },
        methods:{
        }
    });
    //活期投资记录
    let vue2 = new Vue({
        el: "#app2",
        data: {
            bid2:null
        },
        methods:{
            hq:(bid,index)=>{
                layer.confirm('确定收回？', {
                    btn: ['收回','取消'], //按钮
                    title:'确认收回'
                }, function(){
                    $.ajax({
                        url:"/specimens/sh/"+bid,
                        type: "post",
                        dataType:"json",
                        data:{
                            bidId:bid
                        },
                        success: function (data) {
                            if(data==10){
                                layer.msg('收回成功',{time:2000,icon:1});
                                parent.layer.closeAll();
                                vue2.bid2[index].status='已收回';

                            }
                        }
                        /* error:function () {
                             layer.msg('呀呀呀,报错啦',{time:3000,icon:2});
                             return false;
                         }*/
                    })
                }, function(){

                });
            }
        }
    });

    let $page = [[${page}]];
    let $page2 = [[${page2}]];
    let $uid = [[${userId}]];
    let table;
    layui.use(['laypage','element','table', 'layer'], function() {
        var laypage = layui.laypage
            , layer = layui.layer;
        table = layui.table;
        //定期投资记录
        laypage.render({
            url:"/depositsHistory",
            elem: 'demo0'
            ,limit:5
            ,curr: location.href.replace('#!fenye=','')
            ,hash: 'fenye'
            ,count: $page //数据总数
            ,page: {limit:5,page:1,limits:[5,10,15],layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']}
            ,jump:function(obj,first){   //当我点击跳转页面时会执行另一个ajax
                let params = new URLSearchParams();
                params.append("page",obj.curr);
                params.append("limit",obj.limit);
                params.append("uid",$uid)
                axios({
                    method: 'post',
                    url:'/investmentPage',
                    headers: { 'content-type': 'application/x-www-form-urlencoded'},
                    data: params
                }).then(res=> {
                    let data = res.data;
                    data.forEach(function (d) {
                        d.Investment_time = d.Investment_time.substr(0,19).replace("T"," ");
                        d.Investment_time = mytime(d.Investment_time);
                        if(d.state==1){
                            d.status = "已通过";
                        }else if(d.state==2){
                            d.status = "已收回";
                        };

                        if(d.types==2){
                            d.types ="定期";
                        }else if(d.types==1){
                            d.types ="活期"
                        }
                    });
                    vue1.bid1 = data;
                })
            }
        });
        //活期投资记录
        laypage.render({
            url:"/depositsHistory2",
            elem: 'demo1'
            ,limit:5
            ,curr: location.href.replace('#!fenye=','')
            ,hash: 'fenye'
            ,count: $page2 //数据总数
            ,page: {limit:5,page:1,limits:[5,10,15],layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']}
            ,jump:function(obj,first){   //当我点击跳转页面时会执行另一个ajax
                let params = new URLSearchParams();
                params.append("page",obj.curr);
                params.append("limit",obj.limit);
                params.append("uid",$uid)
                axios({
                    method: 'post',
                    url:'/investmentPage2',
                    headers: { 'content-type': 'application/x-www-form-urlencoded'},
                    data: params
                }).then(res=> {
                    let data = res.data;
                    data.forEach(function (d) {
                        d.Investment_time = d.Investment_time.substr(0,19).replace("T"," ");
                        d.Investment_time = mytime(d.Investment_time);
                        if(d.state==1){
                            d.status = "已通过";
                        }else if(d.state==2){
                            d.status = "已收回";
                        };

                        if(d.types==2){
                            d.types ="定期";
                        }else if(d.types==1){
                            d.types ="活期"
                        }

                    });
                    vue2.bid2 = data;
                })
            }
        });

    })


    function mytime(oldTimes1) {
        let time1 = oldTimes1.split(' ')[0];
        // //console.log("1、第二种方式time1:" + time1)
        let arrTime = oldTimes1.split(' ')[1].split(':');
        // //console.log("2、第二种方式arrTime:" + arrTime)
        let time2 = arrTime.slice(1, arrTime.length).join(':');
        // //console.log("3、第二种方式time2:" + time2)
        let h = parseInt(arrTime[0]) + 8;
        // //console.log('4、第二种方式小时：', h);
        let newH = ((h < 24) ? h : (h % 24)).toString();
        if(newH<10){
            newH=" 0"+newH;
        }
        return time1 + ' ' + newH + ':' + time2;
    }
</script>
<script>
    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function(elem){
            location.hash = 'test='+ $(this).attr('lay-id');
        });
    })
</script>
</html>